<template>
  <div class="content industry-jpg2">
    <div class="industry">
      <div class="industry-row">
        <div>
          <div class="industry-title">
            <p>海宁市单位GDP能耗目标进度情况<i class="gl"></i><i class="gl"></i></p>
          </div>
          <table class="industry-table">
            <thead>
              <tr>
                <th>名称</th>
                <th>1月</th>
                <th>2月</th>
                <th>3月</th>
                <th>4月</th>
                <th>5月</th>
                <th>6月</th>
                <th>7月</th>
                <th>8月</th>
                <th>9月</th>
                <th>10月</th>
                <th>11月</th>
                <th>12月</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in tableDate" :key="item.index">
                <td :style="{color: '#0ff6fc'}">GDP(亿元)</td>
                <td>{{item[0]}}</td>
                <td>{{item[1]}}</td>
                <td>{{item[2]}}</td>
                <td>{{item[3]}}</td>
                <td>{{item[4]}}</td>
                <td>{{item[5]}}</td>
                <td>{{item[6]}}</td>
                <td>{{item[7]}}</td>
                <td>{{item[8]}}</td>
                <td>{{item[9]}}</td>
                <td>{{item[10]}}</td>
                <td>{{item[11]}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="industry-row">
        <div class="industry-box">
          <div class="industry-title">
            <p>单位GDP能耗下降率趋势分析<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'industryB',
  data () {
    return {
      chartTheme: {},
      chart1: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            name: 'GDP（亿元）',
            type : 'value',
          },
          {
            name: '增速（%）',
            type : 'value',
          },
        ],
        legend: {
          data: ['本期','同期','增速']
        },
        series : [
          {
            name:'本期',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#54cf33'},
                  {offset: 1, color: '#01c381'}
                ]),
              }
            }
          },
          {
            name:'同期',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#0385e1'},
                  {offset: 1, color: '#015ab0'}
                ]),
              }
            }
          },
          {
            name:'增速',
            type:'line',
            smooth: false,
            symbolSize: 6,
            yAxisIndex: 1,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(201, 025, 100, 0.5)',
              shadowOffsetY: 4,
              shadowBlur: 10
            },
            data:[2, 5.2, 5.4, 5.8, 7.0, 7.8, 8.0],
            itemStyle: {
              normal: {
                color: '#fd8d53'
              }
            }
          }
        ]
      },
      tableDate:[
        [44.24,46.02,50.22,49.75,48.24,44.71,45.8,43.24,43.53,41.07,42.31,42.04],
        [235.54,225.21,241.3,248.32,224.89,251.21,210.31,233.32,264.21,250.2,237.25,245.91],
        [274.31,265.12,241.65,273.54,285.14,271.01,246.12,277.12,260.32,265.17,254.36,267.14],
        [157.55,147.62,108.24,136.8,151.42,138.38,148.22,156.59,157.4,157.55,97.42,164.47],
        [38.54,36.62,31.92,29.65,28.07,33.7,36.1,33.2,33.1,30.08,32.1,33.84],
        [2.04,3.44,1.02,1.35,2.34,3.07,3.11,4.21,3.1,1.38,2.01,3.65],
        [107.3,97.58,83.26,105.21,110.21,113.24,105.7,91.32,92.24,94.39,94.25,91.47]
      ]
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })

  },
}
</script>

<style scoped>
  @import '../../../style/industry.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>